<template>
  <!-- <LockModal
    v-if="preferences.widget.lockScreen"
    :avatar="avatar"
    :text="text"
    @submit="handleSubmitLock"
  /> -->

  <LogoutModal
    cancel-text="取消"
    confirm-text="确认"
    :fullscreen-button="false"
    title="提示"
    centered
    content-class="px-5 min-h-10"
    footer-class="border-none"
    header-class="border-none"
  >
    是否退出登录？
  </LogoutModal>

  <RekaDropdownMenu v-model:open="openPopover">
    <NiceDropdownMenuTrigger ref="refTrigger" :disabled="props.trigger === 'hover'">
      <div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full p-1.5">
        <div class="hover:text-accent-foreground flex-center gap-2">
          <NiceAvatar :alt="text" :src="avatar" class="size-8" />
          <span class="flex-center">
            <span class="font-500 text-3.5 text-foreground">{{ text }}</span>
            <Icon icon="lucide:chevron-down" class="color-placeholder ml-1 mt-0.5 size-4" />
          </span>
        </div>
      </div>
    </NiceDropdownMenuTrigger>
    <NiceDropdownMenuContent class="mr-2 min-w-[240px] p-0 pb-1">
      <div ref="refContent">
        <NiceDropdownMenuLabel class="flex items-center p-3">
          <NiceAvatar :alt="text" :src="avatar" class="size-12" />
          <div class="ml-2 w-full">
            <div v-if="text" class="text-foreground mb-1 flex items-center text-sm font-medium">
              {{ text }}
              <slot name="tagText">
                <span v-if="tagText" class="ml-2 text-green-400">
                  {{ tagText }}
                </span>
              </slot>
            </div>
            <div class="text-muted-foreground text-xs font-normal">
              {{ description }}
            </div>
          </div>
        </NiceDropdownMenuLabel>
        <NiceDropdownMenuSeparator v-if="menus?.length" />
        <NiceDropdownMenuItem
          v-for="menu in menus"
          :key="menu.text"
          class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
          @click="menu.handler"
        >
          <NiceIcon :icon="menu.icon" class="mr-2 size-4" />
          {{ menu.text }}
        </NiceDropdownMenuItem>
        <NiceDropdownMenuSeparator />
        <!-- <NiceDropdownMenuItem
          v-if="preferences.widget.lockScreen"
          class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
          @click="handleOpenLock"
        >
          <Icon icon="lucide:lock-keyhole" class="mr-2 size-4" />
          锁定屏幕
          <NiceDropdownMenuShortcut v-if="enableLockScreenShortcutKey">
            {{ altView }} L
          </NiceDropdownMenuShortcut>
        </NiceDropdownMenuItem> -->
        <NiceDropdownMenuSeparator v-if="preferences.widget.lockScreen" />
        <NiceDropdownMenuItem
          class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
          @click="handleLogout"
        >
          <Icon icon="lucide:log-out" class="mr-2 size-4" />
          退出登录
          <NiceDropdownMenuShortcut v-if="enableLogoutShortcutKey">
            {{ altView }} Q
          </NiceDropdownMenuShortcut>
        </NiceDropdownMenuItem>
      </div>
    </NiceDropdownMenuContent>
  </RekaDropdownMenu>
</template>

<script setup lang="ts">
  import type { AnyFunction } from '@nice/types'

  import type { Component } from 'vue'

  import { useUserStore } from '#/stores/modules'
  import { Icon } from '@iconify/vue'
  import {
    NiceAvatar,
    NiceDropdownMenuContent,
    NiceDropdownMenuItem,
    NiceDropdownMenuLabel,
    NiceDropdownMenuSeparator,
    NiceDropdownMenuShortcut,
    NiceDropdownMenuTrigger,
    NiceIcon,
    RekaDropdownMenu,
    useNiceModal,
  } from '@nice/nice-ui'
  import { isWindowsOs } from '@nice/utils'
  import { useMagicKeys, whenever } from '@vueuse/core'

  // import { LockScreenModal } from '../lock-screen'

  interface Props {
    /**
     * 头像
     */
    avatar?: string
    /**
     * @zh_CN 描述
     */
    description?: string
    /**
     * 是否启用快捷键
     */
    enableShortcutKey?: boolean
    /** hover触发时，延迟响应的时间 */
    hoverDelay?: number

    /**
     * 菜单数组
     */
    menus?: Array<{
      handler: AnyFunction
      icon?: Component | Function | string
      text: string
    }>
    /**
     * 标签文本
     */
    tagText?: string
    /**
     * 文本
     */
    text?: string
    /** 触发方式 */
    trigger?: 'both' | 'click' | 'hover'
  }

  defineOptions({
    name: 'UserDropdown',
  })

  const props = withDefaults(defineProps<Props>(), {
    avatar: '',
    description: '',
    enableShortcutKey: true,
    menus: () => [],
    showShortcutKey: true,
    tagText: '',
    text: '',
    trigger: 'click',
    hoverDelay: 500,
  })

  const emit = defineEmits<{ logout: [] }>()

  const userStore = useUserStore()
  const preferences = computed(() => userStore.preferences)
  const openPopover = ref(false)
  // const accessStore = useAccessStore()
  // const [LockModal, lockModalApi] = useNiceModal({
  //   connectedComponent: LockScreenModal,
  // })
  const [LogoutModal, logoutModalApi] = useNiceModal({
    onConfirm() {
      handleSubmitLogout()
    },
  })

  const refTrigger = useTemplateRef('refTrigger')
  const refContent = useTemplateRef('refContent')

  const altView = computed(() => (isWindowsOs() ? 'Alt' : '⌥'))

  const enableLogoutShortcutKey = computed(() => {
    return props.enableShortcutKey
  })

  const enableLockScreenShortcutKey = computed(() => {
    return props.enableShortcutKey
  })

  const enableShortcutKey = computed(() => {
    return props.enableShortcutKey && preferences.value.shortcutKeys.enable
  })

  // function handleOpenLock() {
  //   lockModalApi.open()
  // }

  // function handleSubmitLock(lockScreenPassword: string) {
  //   lockModalApi.close()
  //   accessStore.lockScreen(lockScreenPassword)
  // }

  function handleLogout() {
    // emit
    logoutModalApi.open()
    openPopover.value = false
  }

  function handleSubmitLogout() {
    emit('logout')
    logoutModalApi.close()
  }

  if (enableShortcutKey.value) {
    const keys = useMagicKeys()
    whenever(keys['Alt+KeyQ']!, () => {
      if (enableLogoutShortcutKey.value) {
        handleLogout()
      }
    })

    whenever(keys['Alt+KeyL']!, () => {
      if (enableLockScreenShortcutKey.value) {
        // handleOpenLock()
      }
    })
  }
</script>
